<template>
  <div class="index" v-loading.fullscreen.lock="listloading">
    <van-search
      v-model="value"
      placeholder="请输入搜索关键词"
      v-if="state == 1"
      @search="onSearch"
    />
    <div class="main" v-if="list.length > 0">
      <van-list
        v-if="state == 1"
        v-model="isLoading"
        :finished="finished"
        @load="listonLoad"
        :immediate-check="false"
      >
        <div v-for="item in list" :key="item.id" @click="totop(item)">
          <p>{{ item.code }}</p>
          <p>{{ item.name }}</p>
        </div>
        <div class="more" v-show="morestate">没有更多了</div>
      </van-list>
      <div v-else v-for="item in list" :key="item.id" @click="totop(item)">
        <p>{{ item.code }}</p>
        <p>{{ item.name }}</p>
      </div>
    </div>
    <div class="listnone" v-else>暂无相关数据</div>
  </div>
</template>

<script>
import {
  querySelectShop,
  userMktAndIndustry,
  materialApplyThemeInfo,
  queryUserInfo,
} from "../../api/app.js";
export default {
  name: "Index",
  components: {},

  data() {
    return {
      header: {
        show: true,
        return: true,
        search: false,
        title: "物料申请",
        home: "/index",
        close: true,
      },
      value: "",
      state: this.$route.query.state,
      isHome: false,
      listloading: false,
      list: [],
      finished: false,
      isLoading: false,
      userCode: "",
      pagesize: 20,
      pagNumber: 1,
      morestate: false,
    };
  },

  created() {
    this.loadingdata();
  },
  mounted() {},

  methods: {
    onSearch() {
      this.list = [];
      this.getmendian();
    },
    loadingdata() {
      this.list = [];
      if (this.state == 1) {
        this.header.title = "选择门店";
        this.getuserinfo();
      } else if (this.state == 2) {
        this.header.title = "选择产业";
        this.getuserMktAndIndustry();
      } else {
        this.header.title = "选择活动主题";
        this.getmaterialApplyThemeInfo();
      }
    },
    //查主题
    getmaterialApplyThemeInfo() {
      let that = this;
      let query = this.$route.query;
      let json = {
        tradeCode: query.xwcode,
        industryCode: query.cycode,
        channelCode: query.qdcode,
        custCode:query.mdcode
      };
      // console.log(json);
      this.listloading = true;
      materialApplyThemeInfo(json).then((res) => {
        // console.log(res);
        if (res.code == 200) {
          that.list = [];
          let list = res.data;
          list.forEach((item) => {
            that.list.push({
              code: item.basicCode,
              name: item.themeName,
            });
          });
          // console.log(that.list);
          this.listloading = false;
        }
      });
    },
    //获取工号
    getuserinfo() {
      let that = this;
      queryUserInfo().then((res) => {
        // console.log(res);
        if ((res.code = 200)) {
          that.userCode = res.data.userCode;
          that.getmendian();
        }
      });
    },
    listonLoad() {
      this.pagNumber++;
      // console.log(this.pagNumbe);
      this.getmendian();
    },
    //查门店
    async getmendian() {
      let that = this;
      let json = {
        userCode: this.userCode,
        pageNum: this.pagNumber,
        pageSize: this.pagesize,
        shopCodeName: this.value,
      };
      // console.log(json);
      let data = [];
      let newlist = [];
      this.listloading = true;
      this.isLoading = true;
      this.finished = false;
      // this.listloading = true;
      await querySelectShop(json).then((res) => {
        // console.log(res);
        if (res.code == 200) {
          if (res.data !== null) {
            res.data.forEach((item) => {
              data.push({ code: item.shopCode, name: item.shopName });
            });
            newlist = [...that.list, ...data];
            that.list = newlist;
          }
        } else if (res.code == 500) {
          that.morestate = true;
          that.finished = true;
        }
        that.listloading = false;
        that.isLoading = false;
      });
    },
    //获取产业
    getuserMktAndIndustry() {
      let that = this;
      this.listloading = true;
      userMktAndIndustry().then((res) => {
        // console.log(res);
        if (res.code == 200) {
          that.list = [];
          let list = res.data.industryList;
          list.forEach((item) => {
            that.list.push({
              code: item.industryCode,
              name: item.industryName,
            });
          });
          this.listloading = false;
        }
      });
    },
    clearzt() {
      let dto = "";
      this.$store.dispatch("selectOption/setSelectBrand", dto);
    },
    totop(item) {
      // state: this.state,
      //     code: item.code,
      //     name: item.name,
      let listname = "";
      let path = "";
      if (this.state == 1) {
        listname = "1";
        path = "selectOption/setSelectOptions";
        this.clearzt();
      } else if (this.state == 2) {
        listname = "2";
        path = "selectOption/setSelectCustomer";
        this.clearzt();
      } else {
        listname = "3";
        path = "selectOption/setSelectBrand";
      }
      let dto = {
        selectFlag: listname,
        code: item.code,
        name: item.name,
      };
      // console.log(dto);
      // console.log(path);
      // return false
      this.$store.dispatch(path, dto);
      // this.$router.go(-1);
      this.$router.push({
        name: "submission",
        query: {
          state: "002",
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.index {
  font-size: 0.14rem;
  .main {
    width: 95vw;
    margin: 0 auto;
    border-radius: 0.03rem;
    background-color: #fff;
    margin-top: 0.1rem;
    > div,
    .van-list > div {
      width: 100%;
      position: relative;
      padding: 0.1rem;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      flex-wrap: wrap;
      box-sizing: border-box;
      border-bottom: 1px solid #eee;
      &:last-child {
        border: 0;
      }
      p {
        width: 100%;
        margin: 0;
        color: #333;
      }
      p:first-child {
        margin-bottom: 0.05rem;
      }
      .icon {
        position: absolute;
        right: 0.05rem;
      }
    }
    .more {
      display: block;
      width: 100%;
      text-align: center;
      color: #666;
    }
  }

  .listnone {
    width: 95vw;
    margin: 0 auto;
    border-radius: 0.03rem;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 1rem;
    margin-top: 0.1rem;
  }
}
</style>
